<template>
	<view class="order-page bg-gradual-blue">
		<!-- 顶部导航 -->
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-back"></text>
			</view>
			<view class="content text-bold">
				<text class="text-xl">我的订单</text>
			</view>
			<view class="action">
				<text class="cuIcon-search"></text>
			</view>
		</view>

		<!-- 订单列表 -->
		<scroll-view scroll-y class="order-list" refresher-enabled @refresherrefresh="onRefresh">
			<!-- 订单卡片 - 使用ColorUI卡片样式 -->
			<view class="cu-card case" v-for="order in orderList" :key="order.id">
				<view class="cu-item bg-white shadow-blur" style="border-radius:15px;margin:15px;overflow:hidden">
					<!-- 店铺信息 -->
					<view class="shop-info bg-white padding-sm flex align-center" @click="goToShop(order.shopId)">
						<view class="cu-avatar round lg" :style="{backgroundImage:'url(/static/shop-logo.png)'}"></view>
						<view class="margin-left-sm">
							<text class="text-black text-bold">{{order.shopName || '默认店铺'}}</text>
							<view class="flex align-center margin-top-xs">
								<text class="cuIcon-locationfill text-orange margin-right-xs"></text>
								<text class="text-gray text-sm">{{order.shopAddress || '暂无地址信息'}}</text>
							</view>
						</view>
						<view class="margin-left-auto">
							<text class="cuIcon-right text-gray"></text>
						</view>
					</view>

					<!-- 商品预览 - Q版样式 -->
					<view class="product-preview bg-white padding-sm">
						<view class="flex flex-wrap">
							<view class="basis-xs" v-for="(product, index) in order.products" :key="index">
								<image :src="product.productImage || '/static/default-product.png'"
									class="product-image q-style" mode="aspectFill"></image>
							</view>
						</view>
					</view>

					<!-- 订单信息 -->
					<view class="order-info bg-gray padding-sm">
						<view class="flex justify-between align-center">
							<text class="text-gray">订单号: {{order.orderNumber}}</text>
							<!-- <text class="text-gray">评价状态: {{order.reviewStatus}}</text> -->
							<view class="cu-tag round bg-orange light">{{getStatusText(order.status)}}</view>
						</view>
						<view class="flex justify-between align-center margin-top-sm">
							<text class="text-black text-bold">实付: ¥{{order.totalAmount}}</text>
							<text class="text-gray text-sm">共{{order.products.length}}件</text>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="action-buttons bg-white flex justify-end padding-sm">
						<button class="cu-btn round line-gray margin-right-sm" v-if="order.status === 1"
							@click.stop="cancelOrder(order.id)">
							<text class="cuIcon-close"></text> 取消订单
						</button>
						<button class="cu-btn round line-green" v-if="[2,3].includes(order.status)"
							@click.stop="goToDetail(order.id)">
							<text class="cuIcon-right"></text> 查看详情
						</button>
						<button class="cu-btn round bg-gradual-orange" v-if="order.status === 4 && !order.reviewStatus"
							@click.stop="goToReview(order.id)">
							<text class="cuIcon-writefill"></text> 去评价
						</button>
					</view>
				</view>
			</view>

			<!-- 空状态 - Q版设计 -->
			<view class="empty-state flex flex-direction align-center justify-center"
				v-if="orderList.length === 0 && !loading">
				<image src="/static/q-empty-order.png" class="empty-image" style="width:200px;height:200px"></image>
				<text class="text-gray text-lg margin-top">您还没有任何订单哦~</text>
				<button class="cu-btn round bg-gradual-green margin-top-lg" @click="goToShop">
					<text class="cuIcon-shopfill"></text> 去逛逛
				</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				orderList: [], // 订单列表
				loading: false,
				refreshing: false
			}
		},

		computed: {
			...mapState('user', ['userData']),
			...mapGetters('user', ['userId']),
		},

		onLoad() {
			this.loadOrders()
		},

		methods: {
			async loadOrders() {
				if (this.loading) return;
				this.loading = true;

				try {
					if (!this.userId) throw new Error('请先登录');

					const res = await this.$api.order.getUserOrders({
						userId: this.userId,
						withShopInfo: true,
						withAddress: true
					});

					// 模拟数据 - 实际应从API获取
					this.orderList = res.data.map(order => ({
						...order,
						shopName: order.shopName || '默认店铺',
						address: this.formatAddress(order.addressInfo),
						products: (order.products || []).map(p => ({
							...p,
							productImage: p.productImage || '/static/default-product.png'
						}))
					}));
				} catch (error) {
					uni.showToast({
						title: error.message,
						icon: 'none'
					});
				} finally {
					this.loading = false;
					uni.stopPullDownRefresh();
				}
			},

			formatAddress(address) {
				if (!address) return '暂无地址';
				return `${address.province}${address.city}${address.district}${address.detail}`;
			},

			onRefresh() {
				this.refreshing = true;
				this.loadOrders().finally(() => {
					this.refreshing = false;
				});
			},

			goToDetail(orderId) {
				uni.navigateTo({
					url: `/pages/order/detail?orderId=${orderId}`
				});
			},

			goToShop(shopId) {
				uni.navigateTo({
					url: `/pages/shop/index?shopId=${shopId}`
				});
			},

			goToReview(orderId) {
				uni.navigateTo({
					url: `/pages/order/review?orderId=${orderId}`
				});
			},

			async cancelOrder(orderId) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await this.$api.order.cancelOrder(orderId);
								uni.showToast({
									title: '取消成功'
								});
								this.onRefresh();
							} catch (error) {
								uni.showToast({
									title: '取消失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},

			getStatusText(status) {
				const statusMap = {
					0: '已取消',
					1: '待付款',
					2: '待发货',
					3: '待收货',
					4: '已完成',
					5: '已退款'
				};
				return statusMap[status] || '未知状态';
			}
		}
	}
</script>

<style lang="scss">
	.order-page {
		min-height: 100vh;

		.cu-card {
			margin: 0;
			box-shadow: none;
		}

		.shop-info {
			border-bottom: 1px dashed #eee;
		}

		.product-preview {
			.product-image {
				width: 70px;
				height: 70px;
				border-radius: 10px;
				margin: 5px;
				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
				transition: all 0.3s;

				&.q-style {
					border: 2px solid #fff;
					transform: rotate(-5deg);

					&:nth-child(2n) {
						transform: rotate(5deg);
					}

					&:hover {
						transform: scale(1.1) rotate(0deg);
						z-index: 1;
					}
				}
			}
		}

		.order-info {
			background: linear-gradient(to right, #f5f5f5, #fff);
		}

		.empty-state {
			height: 60vh;

			.empty-image {
				opacity: 0.8;
			}
		}

		/* 立体盒子效果 */
		.shadow-blur {
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
			transform: translateY(0);
			transition: all 0.3s;

			&:active {
				transform: translateY(2px);
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
			}
		}

		/* 渐变色按钮 */
		.bg-gradual-orange {
			background-image: linear-gradient(45deg, #ff9700, #ed1c24);
			color: white;
		}

		.bg-gradual-green {
			background-image: linear-gradient(45deg, #39b54a, #8dc63f);
			color: white;
		}

		.bg-gradual-blue {
			background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
		}
	}
</style>